<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>选择框 Select-表单-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/form/select.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/js/form/select.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="select"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>选择框 Select</h1>
        <hr class="mt24 mb24">
        <p>所有的选择框，都赋予了一个属性<code>type="hidden"</code>的输入框，用于获取表单数据。<br>对于多选框，将会存在多个相同<code>name</code>，不同<code>value</code>的隐形输入框。如下：</p>
        <pre class="pr"><code class="hljs language-xml zp-select-hiddeninput-html"></code></pre>

        <hr class="mt24 mb24">
        <h2 id="default"># 默认单选框</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <zp-select class="w240" name="name" style="--content:#333">
            <zp-option value="a">小明</zp-option>
            <zp-option value="b">小鹏</zp-option>
            <zp-option value="c">小泽</zp-option>
          </zp-select>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-select-default-html"></code></pre>
        
        <hr class="mt24 mb24">
        <h2 id="multi"># 多选框</h2>
        <p>👇效果演示：</p>
        <div class="quote f fw">
          <zp-select class="w240" name="name[]" multi="1" style="--content:#333">
            <zp-option value="a">多愁的小明</zp-option>
            <zp-option value="b">善感的小鹏</zp-option>
            <zp-option value="c">迸发的小泽</zp-option>
          </zp-select>
        </div>
        <p>👇代码演示：</p>
        <pre class="pr"><code class="hljs language-xml zp-select-multi-html"></code></pre>

        <hr class="mt24 mb24">
        <h2 id="trigger"># 触发方式</h2>
        <p>Select 组件默认使用<code>click</code>事件进行触发，您可以使用<code>mouseover</code>进行触发：</p>
        <div class="quote f fw">
          <zp-select class="w240" name="name" trigger="mouseover" multi="1" style="--content:#333">
            <zp-option value="a">小明</zp-option>
            <zp-option value="b">小鹏</zp-option>
            <zp-option value="c">小泽</zp-option>
          </zp-select>
        </div>

        <hr class="mt24 mb24">
        <h2 id="colors"># 改变选框大小</h2>
        <p>使用规则，请参照<a href="/form/input.html#size">《表单：输入框-改变大小》</a>。</p>

        <hr class="mt24 mb24">
        <h2 id="colors"># 改变颜色</h2>
        <p>使用规则，请参照<a href="/form/input.html#color">《表单：输入框-改变颜色》</a>。</p>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#default" class="txt-con txt-p-h">默认单选框</a></li>
        <li><a href="#multi" class="txt-con txt-p-h">多选框</a></li>
        <li><a href="#trigger" class="txt-con txt-p-h">触发方式</a></li>
        <li><a href="#size" class="txt-con txt-p-h">改变选框大小</a></li>
        <li><a href="#color" class="txt-con txt-p-h">改变颜色</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>